﻿@model Core.Models.UserUI

@{
    ViewBag.Title = "Create New User";
}

<h1>@ViewBag.Title</h1>
<p>
    &nbsp;
</p>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true, "Account creation was unsuccessful. Please correct the errors and try again.")
    @Html.HiddenFor(model => model.UserId)
    @Html.HiddenFor(model => model.BusinessUnitId)
    @Html.Hidden("hdnRoleId")
    @Html.HiddenFor(model => model.RoleIds)
    <table width="90%" cellspacing="0" cellpadding="5" border="0">
    <tr>
        <td valign="top">
        <fieldset>
            <legend>Account Information</legend>
            @Html.HiddenFor(m => m.BusinessUnitId)

            <div class="editor-label">
                @Html.LabelFor(m => m.FirstName)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(m => m.FirstName)
                @Html.ValidationMessageFor(m => m.FirstName)
            </div>

            <div class="editor-label">
                @Html.LabelFor(m => m.LastName)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(m => m.LastName)
                @Html.ValidationMessageFor(m => m.LastName)
            </div>

            <div class="editor-label">
                @Html.LabelFor(m => m.Email)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(m => m.Email)
                @Html.ValidationMessageFor(m => m.Email)
            </div>
        </fieldset>
        </td>        
        <td valign="top">
        <fieldset>
            <legend>Roles & Permissions</legend>

            <div class="editor-label">
                @Html.LabelFor(model => model.RoleIds)
            </div>
            <div class="editor-field">
                @Html.TextBox("txtRole")
                <input type="button" name="RoleAdd" value="Add" onclick="javascript: AddRole();" />
                <div id="txtRoles" class="AutoCompleteResults">@Html.Raw(Model.RoleDisplay)</div>
            </div>
        </fieldset>
        </td>
    </tr>
    <tr>
        <td colspan="2">
        &nbsp;
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <input type="submit" value="Create User" /> |
            @Html.ActionLink("Back to List", "Index", new { id = Model.BusinessUnitId })
        </td>
    </tr>
    </table>
}
<script type="text/javascript" language="javascript">
    function RemoveRole(id) {
        // Remove from the comma separated RoleIds hidden field
        var ids = $("#RoleIds").val();
        var i = ids.toLowerCase().indexOf(id);
        if (i) {
            i -= 1;
            ids = ids.substring(0, i) + ids.substring(i + 37);
            $("#RoleIds").val(ids);
        }
        // Remove from the User Interface
        ids = $("#txtRoles").html();
        i = ids.toLowerCase().indexOf(id);
        if (i) {
            var t = ids.substring(0, i).toLowerCase();
            var j = t.toLowerCase().lastIndexOf("&nbsp;&lt;<span>");
            ids = ids.substring(0, j) + ids.substring(i + 56);
            $("#txtRoles").html(ids);
        }
    }

    function AddRole() {
        // Add in the user interface div. If the below formatting is changed, it needs to reflect in the UserController as well.
        if ($("#hdnRoleId").val() != "")
        {
            var t = "&nbsp;&lt;<span>" + $("#txtRole").val() + "&nbsp;<a href='javascript: RemoveRole(\"" + $("#hdnRoleId").val() + "\")'>X</a></span>&gt;";
            var x = $("#txtRoles").html();
            x += t;
            $("#txtRoles").html(x);
            // Add the id in the hidden hdnRoleIds field. The id is placed in the hdnRoleId field by the autocomplete select function.
            // Leading comma is used by design for consistency.
            var ids = $("#RoleIds").val();
            ids += "," + $("#hdnRoleId").val()
            $("#RoleIds").val(ids);
            // clear out user input area
            $("#txtRole").val("");
            $("#hdnRoleId").val("");
        }
    }

    $(function () {
        $("#txtRole")
        .autocomplete({
            select: function (event, ui) {
                $("#hdnRoleId").val(ui.item.id);
            },
            source: function (request, response) {
                $.ajax({
                    url: "/User/Roles", type: "POST", dataType: "json",
                    data: { search: request.term, maxitems: 10 },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return { label: item.Name, value: item.Name, id: item.Id }
                        }))
                    }
                })
            }
        });
    });
</script>
